<template>
    <div class="logo" ref="logo" @dblclick="open"></div>
</template>

<script>
    export default {
        data() {
            return {
                win: this.$electron.remote.getCurrentWindow(),
                ipcRenderer: this.$electron.ipcRenderer,
                bias: [],
                whichScreen: null,
            }
        },
        mounted() {
            this.bindMove();
            let winBounds = this.win.getBounds();
            this.whichScreen = this.$electron.remote.screen.getDisplayNearestPoint({ x: winBounds.x, y: winBounds.y });
            this.win.setPosition(this.whichScreen.size.width - 100, this.whichScreen.size.height - 150);
        },
        methods: {
            open() {
                this.ipcRenderer.send('open-service-window');
            },
            bindMove() {
                document.addEventListener('mousedown', this.mousedownEvent);
                document.addEventListener('mouseup', this.mouseupEvent);
            },
            mousedownEvent(e) {
                switch (e.button) {
                    case 0:
                        this.bias = [e.x, e.y];
                        document.addEventListener('mousemove', this.moveEvent);
                        break
                }
            },
            mouseupEvent() {
                this.bias = [0, 0];
                document.removeEventListener('mousemove', this.moveEvent)
            },
            moveEvent(e) {
                this.win.setPosition(e.screenX - this.bias[0], e.screenY - this.bias[1])
            },
        },
    }
</script>
<style scoped>
    .logo {
        cursor: pointer;
        position: absolute;
        width: 50px;
        height: 50px;
        background: url('~@/assets/logo.png');
        background-size: 100% 100%;
    }
</style>